<template>
  <div>
    <h1>vuex</h1>
    <home></home>
    <h1>{{ count }}</h1>
    <h1>{{ evenOrOdd }}</h1>
    <button @click="btnAdd">加1</button>
    <button @click="btnDecrement">减1</button>
  </div>
</template>

<script>
/* 
vuex 是对vue应用当中多个组件的共享状态进行集中管理的一个vue插件

*/
import Home from "./components/Home.vue";
export default {
  mounted() {
    console.log(this.$store);
  },
  components: {
    Home,
  },
  // 在computed中调用state和getters当中的数据
  computed: {
    count() {
      return this.$store.state.count;
    },
    evenOrOdd() {
      return this.$store.getters.evenOrOdd;
    },
  },
  // 更改state的方法 actions或者mutations当中
  // 在组件当中如何触发actions和mutations
  // actions直接同组件进行交互
  // mutations是能同组件直接进行联系，但是一般通过actions 进行联系
  // 在methods当中调用actions和mutations当中的方法
  methods: {
    // 例如加法需求 通过mutations中的add方法进行加
    // 在组件当中触发mutations中的方法是通过this.$store上的commit进行触发
    btnAdd() {
      this.$store.commit("add");
    },
    // 减法 通过actions当中的减法进行减法操作
    // 在组件当中触发actions中的方法是通过this.$store上的dispatch进行触发
    btnDecrement() {
      this.$store.dispatch("decrementAct");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>